.header{
  position: relative;
  z-index: 10000;
  .top{
    height: 40px;
    position: relative;
    background: $headerTopBg;
    padding: 0 20px;
    .logo{
      float: left;
      margin-left: 20px;
      cursor: pointer;
      overflow: hidden;
      height: 100%;
      line-height: 40px;
      .logo-img{
        margin-top: 8px;
        width: 30px;
        height: auto;
        vertical-align: middle;
      }
      .title{
        font-size:16px;
        color:#fff;
        margin-left: 10px;
        line-height: 40px;
      }
    }
    // 右边小菜单
    .right-menu {
      float: right;
      height: 100%;
      line-height: 40px;
      &:focus {
        outline: none;
      }
      .right-menu-item {
        display: inline-block;
        padding: 0 8px;
        height: 100%;
        font-size: 18px;
        color: #fff;
        vertical-align: text-bottom;
        &.hover-effect {
          cursor: pointer;
          transition: background 0.3s;

          &:hover {
            background: rgba(0, 0, 0, 0.025);
          }
        }
        .time {
          display: inline-block;
          height: 40px;
          line-height: 40px;
        }
      }
      // 头像
      .avatar-container {
        padding-right: 30px;
        .avatar-wrapper {
          margin-top: 5px;
          position: relative;
          line-height: 0;

          .user-avatar {
            cursor: pointer;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            color:#999;
            vertical-align: middle;
          }
          .user-name{
            display: inline-block;
            font-size: 16px;
            padding:5px;
          }

          .el-icon-caret-bottom {
            cursor: pointer;
            position: absolute;
            right: -20px;
            top: 5px;
            font-size: 20px;
          }
        }
      }
    }
  }
  // 导航
  .navbar {
    padding: 0 20px;
    height: 50px;
    position: relative;
    background: $topNavBg;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    .hamburger-container {
      line-height: 50px;
      height: 100%;
      float: left;
      cursor: pointer;
      transition: background 0.3s;
      -webkit-tap-highlight-color: transparent;
      background: $topNavBg;
      &:hover {
        background: rgba(0, 0, 0, 0.025);
      }
    }
    .breadcrumb-container {
      float: left;
    }
    // 顶部导航栏
    .left-menu {
      float: left;
      line-height: 50px;
      height: 100%;
      margin-left: 60px;
      &:focus {
        outline: none;
      }
      .el-menu--horizontal{
        border-bottom: none!important;
      }
      // 顶部导航菜单
      .top-el-menu{
        background-color: $topNavBg;
        color: #ddd;
        .el-menu-item{
          line-height: 50px;
          font-size: 16px;
          height:50px;
          transition: all .5s;
          color: #fff !important;
          padding: 0 20px;
          .el-submenu__title *{
            color: #fff !important;
            font-size: 16px;
          }
        }
        .el-menu-item:hover{
          font-weight: bold;
          background-color: $topNavBg;
          @include border-style-nav()
        }
        .el-menu-right:hover{
          background: rgba(0, 0, 0, .025)
        }
        .el-menu-item.is-active {
          font-weight: bold;
          height: 50px;
          @include border-style-nav()
        }
        .top-list-svg{
          cursor: pointer;
          font-size: 18px;
          vertical-align: middle;
        }
      }

      .menu-wrapper{
        float: left;
        .el-submenu{
          .el-submenu__title *{
            color: #fff !important;
            font-size: 16px;
          }
          .el-submenu__title{
            height: 50px;
            line-height: 50px;
            &:hover {
              background: none !important;
              font-weight: bold;
              @include border-style-nav()
            }
          }
          .el-submenu__icon-arrow{
            right: 0;
          }
          &.is-active{
            .el-submenu__title{
              font-weight: bold;
              @include border-style-nav()
            }
          }
        }
      }
    }
    .go-home {
      float: right;
      margin-right: 20px;
      font-size: 16px;
      line-height: 50px;
      cursor: pointer;
      color: #fff;
    }
    // 右边小菜单
    .right-menu {
      float: right;
      height: 100%;
      line-height: 50px;
      &:focus {
        outline: none;
      }

      .right-menu-item {
        display: inline-block;
        padding: 0 8px;
        height: 100%;
        font-size: 18px;
        color: #fff;
        vertical-align: text-bottom;
        &.hover-effect {
          cursor: pointer;
          transition: background 0.3s;

          &:hover {
            background: rgba(0, 0, 0, 0.025);
          }
        }
        .time {
          display: inline-block;
          height: 50px;
          line-height: 50px;
        }
      }
      // 头像
      .avatar-container {
        padding-right: 30px;
        .avatar-wrapper {
          margin-top: 5px;
          position: relative;
          line-height: 0;

          .user-avatar {
            cursor: pointer;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            color:#999;
            vertical-align: middle;
          }
          .user-name{
            display: inline-block;
            font-size: 16px;
            padding:5px;
          }

          .el-icon-caret-bottom {
            cursor: pointer;
            position: absolute;
            right: -20px;
            top: 8px;
            font-size: 22px;
          }
        }
      }
    }
  }
}
.el-menu--horizontal > .el-submenu .el-submenu__title {
  &:hover {
    background: none !important;
  }
}
.el-menu--horizontal{
  .el-menu{
    min-width: 140px;
    background: $topNavBg;
    .el-menu-item{
      background: none;
      color:#fff!important;
      padding: 0 20px;
    }
    .el-submenu__title{
      background: none;
      color:#fff!important;
      padding: 0 20px;
    }
  }
}
.menu-wrapper{
  @mixin fontStyle(){
    color: #fff !important;
    font-weight: bold;
  }
  .el-menu-item{
    &.is-active {
      color:$blue!important;
    }
  }
  &:hover{
    .el-menu-item{
      @include fontStyle();
    }
    .el-submenu{
      .el-submenu__title{
        @include fontStyle()
      }
    }
  }
  .el-submenu__icon-arrow{
    color:#fff;
  }
}

